<template>
  <div class="card-out-container">
    <CustomTable storeTableName="bridgeTable" rowKey="id" :loading="loading" bordered size="small" :dataSource="dataSource" :columns="columns" :rowSelection="isEnvLocal ?null:{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,getCheckboxProps: checkboxProps, fixed: 'left'}" :pagination="ipagination" @change="handleTableChange" :scroll="{y: 'calc(100vh - 390px)'}" :showMore="showMore" :operateMargin="true">
      <template #operateLeft>
        <div class="operate-left">
          <a-button v-if="isEnvLocal" type="primary" @click="syncData(syncDataAry)">{{$t('common.sync')}}</a-button>
          <span v-else>
            <a-button type="primary" @click="modalDo({},'editForm',false)">{{$t('common.addNew')}}</a-button>
            <!--<a-button type="primary" @click="modalDo({},'addForm',false)">新增</a-button>-->
            <a-button type="warning" ghost :disabled="!selectedRowKeys.length" @click="handleDelete(null)">{{$t('common.delMore')}}</a-button>
          </span>
        </div>
      </template>
      <template #operateRight>
        <div class="slot-operate-right">
          <a-input-search v-model:value.trim="fuzzySearch" enter-button :placeholder="$t('other.startingMainRail')" v-if="!showMore" @search="loadData" />
          <!--          <a-button class="ml-10" @click="toggleMore" type="primary" ghost>高级筛选</a-button>-->
        </div>
      </template>
      <template #bodyCell="{ scope}">
        <template v-if="scope.column.key === 'bridgeNo'">
          <span>{{ scope.record.hangerLineBridgeDTO?.code }}</span>
        </template>
        <template v-if="scope.column.key === 'bridgePath'">
          <span> {{ scope.record.hangerLineBridgeDTO?.astation }}</span>
          <span>{{ scope.record.hangerLineBridgeDTO?.direction ==1 ? '<-':scope.record.hangerLineBridgeDTO?.direction ==2?'<->':'->'}}</span>
          <span>{{ scope.record.hangerLineBridgeDTO?.bstation  }}</span>
        </template>
        <template v-if="scope.column.key === 'operate'">
          <span class="table-operate-container">
            <a-button type="link" class="primary-link" @click="modalDo(scope.record,'editForm',true)">{{$t('common.editor')}}</a-button>
            <a-divider type="vertical" />
            <a-button type="link"  class="warning-link" @click="handleDelete(scope.record.id)">{{$t('common.del')}}</a-button>
          </span>
        </template>
      </template>
    </CustomTable>

    <add-dialog ref="addForm" @ok="modalFormOk"></add-dialog>
    <edit-dialog ref="editForm" @ok="modalFormOk"></edit-dialog>
    <SyncDataModal ref="syncDataModalRef" />
  </div>
</template>
<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import AddDialog from './modules/addDialog.vue'
import EditDialog from './modules/editDialog.vue'
// import axios from "@/utils/request";
import { normalColumns, localColumns } from "./modules/makeConfig.js"
import CustomTable from '@/components/commonTable/customTable.vue'
import SyncDataModal from '@/components/syncModal/syncDataModal.vue'
// import {isEmpty} from "lodash";

export default {
  name: 'deviceManageBridgeRoadConfig',
  mixins: [ListMixinPm],
  components: {
    AddDialog,
    EditDialog,
    CustomTable,
    SyncDataModal
  },
  data () {
    return {
      url: {
        list: '/api/device/bridge-cross/page',
        // save: '/api/device/bridge-path/update',
        delete: '/api/device/bridge-cross/delete',
        sync: '/api/system/iot/sync-cloud-data'
      },
      columns: [],
      fuzzySearchName: 'startMasterTrackNo',
      syncDataAry: [
        { syncIotCloudDataType: 'ihs:device:hangerLineBridge' },
        { syncIotCloudDataType: 'ihs:device:station' },
        { syncIotCloudDataType: 'ihs:device:masterTrack' },
        { syncIotCloudDataType: 'ihs:device:hangerLine' },
        { syncIotCloudDataType: 'ihs:device:hangerLinePushRod' },
        { syncIotCloudDataType: 'ihs:device:hangerLineGroup' }
      ]
    }
  },
  created () {
    this.columns = this.isEnvLocal ? localColumns : normalColumns
  },
  methods: {

  },



}
</script>